import React, { useState } from "react";
import { Column, Line} from '@ant-design/charts';
import { Rose } from '@ant-design/plots';
import {Button, PageHeader, Space} from "antd";
import firmInfoModel from "../models/firmInfoModel";
import '../App.css';
function TopFlight_f(props) {
    const [data, setData] = useState([]);
    React.useEffect(async () => {
        // const response = await fetch(
        //     'http://flightapi.xiexianbo.xin/flight/getTopAT',)
        // const data = await response.json();
        // const tempData = data.data.data;
        // console.log(tempData);
        // setData(Array.from(tempData));
        //查询Top10公司信息
        let getTopAC = async () => {
            var arrayModels = [];
            const response = await fetch(
                'http://flightapi.xiexianbo.xin/flight/getTopAT',
                {
                    method:'GET'
                }
            )
            const data  = await response.json();
            const data1 = await data.data.data;
            data1.forEach((value) => {
                let model = new firmInfoModel(value.atype,value.flightAmount);
                arrayModels.push(model);
            });
            // arrayModels.forEach((value) => {
            //     console.log(value);
            // });
            console.log(data1);
            setData(Array.from(data1));
        }
        getTopAC();
    }, []);
    //分页查询时间段内各城市航班吞吐量

    const config1 = {
        padding:[50,200,50, 200],
        data: data,
        xField: 'atype',
        yField: 'flightAmount',
        label: {
            position: 'middle',
            style: {
                fill: '#FFFFFF',
                opacity: 0.6,
            },
        },
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
        meta: {
            atype: {alias: '飞机型号'},
            flightAmount: {alias: '航班数量'},
        },
        annotations: [
            {
                type: 'text',
                position: ['min', 'median'],
                content: '中位线',
                offsetY: -4,
                style: {
                    textBaseline: 'bottom',
                },
            },
            {
                type: 'line',
                start: ['min', 'median'],
                end: ['max', 'median'],
                style: {
                    stroke: 'red',
                    lineDash: [2, 2],
                },
            },
        ],
    };
    const config2 = {
        padding:[50,200,50, 200],
        data: data,
        xField: 'atype',
        yField: 'flightAmount',
        label: {
            position: 'middle',
            style: {
                fill: '#FFFFFF',
                opacity: 0.6,
            },
        },
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
        meta: {
            atype: {alias: '飞机型号'},
            flightAmount: {alias: '航班数量'},
        },
        animation: {
            appear: {
                animation: 'path-in-out',
                duration: 1000,
            },
        },
        annotations: [
            {
                type: 'text',
                position: ['min', 'median'],
                content: '中位线',
                offsetY: -4,
                style: {
                    textBaseline: 'bottom',
                },
            },
            {
                type: 'line',
                start: ['min', 'median'],
                end: ['max', 'median'],
                style: {
                    stroke: 'red',
                    lineDash: [2, 2],
                },
            },
        ],
        scrollbar: {type: 'vertical'},
    };
    const config3 = {
        width:500,
        height:500,
        data:data,
        xField: 'atype',
        yField: 'flightAmount',
        seriesField: 'atype',
        radius: 1,
        // 设置 active 状态样式
        state: {
            active: {
                style: {
                    lineWidth: 0.3,
                    fillOpacity: 0.9,
                },
            },
        },
        legend: {
            position: 'bottom',
        },
        interactions: [
            {
                type: 'element-active',
            },
        ],

    };
    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => {props.history.goBack()}}
                title="Top10机型展示"
            />,
            <Rose {...config3} />
            <Line {...config1} ></Line>
            <Column {...config2} ></Column>
            <div className="div2"></div>

        </>
    );
}
export default TopFlight_f;